<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>

    div {
        /*border: #2aabd2 solid 2px;*/
    }

</style>
<body>



    <!--//增加一些空间-->
    <div class="container">
        <div class="jumbotron">
            <h2>网站标题</h2>
            <p>这是一个学习型的网站</p>
            <p><a href="" class="btn">更多内容</a></p>
        </div>
    </div>

    <!--//100%全屏，没有圆角-->
    <div class="jumbotron">
        <div class="container">
            <h2>网站标题</h2>
            <p>这是一个学习型的网站</p>
            <p><a href="" class="btn">更多内容</a></p>
        </div>
    </div>


    <div class="container">
        <div class="jumbotron">
            <h2>网站标题</h2>
            <p>这是一个学习型的网站</p>
            <p><a href="" class="btn">更多内容</a></p>
        </div>
    </div>

    <!--//100%全屏，没有圆角-->
    <div class="jumbotron">
        <div class="container">
            <h2>网站标题</h2>
            <p>这是一个学习型的网站</p>
            <p><a href="" class="btn">更多内容</a></p>
        </div>
    </div>

    <ul class="nav nav-pills">
        <li class="active">
            <a href="">首页<span class="badge">2</span></a>
        </li>
        <li><a href="">关于</a></li>
    </ul>


    <button class="btn btn-default">
        提交<span class="badge">3</span>
    </button>


    <a href="">信息<span class="badge">10</span></a>


    <h3>标签<span class="label label-default">new</span></h3>
    <h3>标签<span class="label label-primary">new</span></h3>
    <h3>标签<span class="label label-success">new</span></h3>
    <h3>标签<span class="label label-info">new</span></h3>
    <h3>标签<span class="label label-warning">new</span></h3>
    <h3>标签<span class="label label-danger">new</span></h3>


    <ol class="pager">
        <li class="previous"><a href="">上一页</a></li>
        <li class="next"><a href="">下一页</a></li>
    </ol>

    <ol class="pager">
        <li class="previous disabled"><a href="">上一页</a></li>
        <li class="next"><a href="">下一页</a></li>
    </ol>


    <ol class="pager">
        <li><a href="">上一页</a></li>
        <li><a href="">下一页</a></li>
    </ol>


    <ol class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">&raquo</a></li>
    </ol>


    <ol class="breadcrumb">
        <li><a href="">首页</a></li>
        <li><a href="">产品列表</a></li>
        <li class="active">某产品</li>
    </ol>


    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"-->
                <!--data-target="#bs-example-navbar-collapse-1" aria-expanded="false">-->
                <!--<span class="sr-only">Toggle navigation</span>-->
                <!--<span class="icon-bar"></span>-->
                <!--<span class="icon-bar"></span>-->
                <!--<span class="icon-bar"></span>-->
                <!--</button>-->
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span
                                class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <ul class="nav nav-pills">
        <li class="active"><a href="">首页</a></li>
        <li><a href="">咨询</a></li>
        <li><a href="">产品</a></li>
        <li><a href="">关于</a></li>
    </ul>


    <div class="input-group">
        <span class="input-group-addon"><input type="checkbox"></span>
        <input type="text" class="form-control"/>
    </div>

    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control"/>
        <span class="input-group-addon">.00</span>
    </div>


    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-addon">@163.com</span>
    </div>


    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control"/>
    </div>


    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">左</button>
            <button type="button" class="btn btn-default">中</button>
            <button type="button" class="btn btn-default">右</button>
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">咨询</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="btn-group-justified">
        <a type="button" class="btn btn-default">左</a>
        <a type="button" class="btn btn-default">中</a>
        <a type="button" class="btn btn-default">右</a>
    </div>


    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">左</button>
            <button type="button" class="btn btn-default">中</button>
            <button type="button" class="btn btn-default">右</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>

    <div class="btn-group">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="button" class="btn btn-default">右</button>
    </div>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <div class="dropdown">
        <div class="dropup">
            <button class="btn btn-default" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li class="dropdown-header">导航</li>
                <li class=”divider”>首页</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">咨询</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <hr>

        <!-- 小图标组件 -->
        <button type="button" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>

        <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>


        <div class="hidden-xs">Show</div>
        <div>Hide</div>
        <form action="" class="form-group">
            <button value="Submit" class="btn-block  text-primary">Submit</button>
            <button value="Submit" class="btn-block text-muted">Submit</button>
            <button value="Submit" class="btn-block">Submit</button>
        </form>
        <hr>

        <img src="img/my_bg.png" alt="Background">
        <img src="img/my_bg.png" alt="Background" class="img-circle">

        <form action="" class="form-group">
            <div class="checkbox disabled">
                <label>
                    <input type="checkbox" value="disabled">
                    Option two is disabled
                </label>
            </div>
        </form>

        <form action="">
            <lable class="checkbox-inline">
                <input type="checkbox" value="man">Male
            </lable>

            <lable class="checkbox-inline">
                <input type="checkbox" value="female">female
            </lable>
        </form>

        <form action="">
            <input type="checkbox" value="man">Male
            <input type="checkbox" value="female">female
        </form>

        <form action="" class="form-inline">
            <div class="form-horizontal">
                <label for="userName2" class="col-md-2 control-label">UserName</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="userName2">
                </div>
            </div>
            <div class="form-horizontal">
                <label for="pwd" class="col-md-2 control-label">Password</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="pwd">
                </div>
            </div>

            <div class="form-horizontal input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control">
            </div>
        </form>
        <hr>
        <hr>
        <hr>

        <!--<div>-->
        <form action="">
            <div class="form-group form-horizontal">
                <label for="userName">UserName</label>
                <div>
                    <input type="text" class="form-control" id="userName">
                </div>
            </div>
        </form>
        <!--</div>-->

        <table class="table">
            <thead>
            <tr>
                <td>User name</td>
                <td>Age</td>
                <td>Height</td>
                <td>Sex</td>
            </tr>
            </thead>
            <tbody>
            <tr 从来>
                <td>Apple</td>
                <td>5</td>
                <td>160cm</td>
                <td>Male</td>
            </tr>
            </tbody>
        </table>

        <div class="table-responsive">
            <table class="table">
                <!--<table class="table table-bordered  table-hover table-condensed">-->
                <tr>
                    <td>User name</td>
                    <td>Age</td>
                    <td>Height</td>
                    <td>Sex</td>
                </tr>
                <tr class="active">
                    <td>Apple</td>
                    <td>5</td>
                    <td>160cm</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>5</td>
                    <td>160cm</td>
                    <td>Male</td>
                </tr>

                <tr class="waring">
                    <td>Apple</td>
                    <td>5</td>
                    <td>160cm</td>
                    <td>Male</td>
                </tr>

                <tr class="danger">
                    <td>Apple</td>
                    <td>5</td>
                    <td>160cm</td>
                    <td>Male</td>
                </tr>


            </table>

        </div>

        <!--//内联代码-->
        <code>&lt;section&gt;</code>

        <!--//用户输入-->
        press<kbd>ctrl+,</kbd>

        <!--pre中空格有效  -->
        <!--//代码块-->
        <pre>请输入</pre>


        <hr>
        <!--列表排版：-->
        <ul>
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
        </ul>

        <!--//移除默认样式-->
        <ul class="list-unstyled">
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
        </ul>
        <!--//设置成内联样式-->
        <ul class="list-inline">
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
            <li>bootstrap框架</li>
        </ul>
        <!--//水平排列描述列表-->
        <dl class="dl-horizontal">
            <dt>bootstrap框架</dt>
            <dd>bootstrap框架是一个优秀的框架</dd>
        </dl>

        <!-- 默认不在同一行-->
        <dl>
            <dt>bootstrap框架</dt>
            <dd>bootstrap框架是一个优秀的框架</dd>
        </dl>


        <!--//设置地址，去掉了倾斜，设置了行高，底部20px-->
        <address>
            <strong>Some Company, Inc.</strong><br>
            007 street<br>
            Some City, State XXXXX<br>
            <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>
        <address>
            <strong>Full Name</strong><br>
            <a href="mailto:#">mailto@somedomain.com</a>
        </address>

        <hr>

        <abbr title="desc" class="initialism">bootstrap</abbr>

        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>


        <p align="right">对齐方式</p>
        <p class="text-right">对齐方式</p>


        <p>bootstrap
            <mark>框</mark>
            架
        </p>

        <!--//各种加线条的文本-->
        <del>bootstrap框架</del>
        <hr>

        <!--//删除文本-->
        <s>bootstrap框架</s> //无用文本
        <ins>bootstrap框架</ins>
        //插入文本
        <u>bootstrap框架</u> //效果同上，下划线文本

        //各种强调的文本
        <small>bootstrap框架</small>
        //标准字号的85%
        <strong>bootstrap框架</strong> //加粗700
        <em>bootstrap框架</em> //倾斜


        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam aut doloremque
            dolorum
            id
            incidunt libero, maiores nihil nisi omnis pariatur provident quae quam quis, sed similique tempora veniam
            voluptatem!</p>


        <h1>bootstrap</h1>
        <h2>bootstrap</h2>
        <h3>bootstrap</h3>
        <h4>bootstrap</h4>
        <h5>bootstrap</h5>
        <h6>bootstrap</h6>

        <h1>bootstrap</h1>
        <h2>bootstrap</h2>
        <h3>bootstrap</h3>
        <h4>bootstrap</h4>
        <h5>bootstrap</h5>
        <h6>bootstrap</h6>

        <span class="h1">bootstrap</span>
        <span class="h2">bootstrap</span>
        <span class="h3">bootstrap</span>
        <span class="h4">bootstrap</span>
        <span class="h5">bootstrap</span>
        <span class="h6">bootstrap</span>
        <hr>
        <!-- div.container -->
        <!--div.container*3-->
        <div class="container">
            <div class="col-md-2">1</div>
            <div class="col-md-2">2</div>
            <div class="col-md-2">3</div>
            <div class="col-md-2">4</div>
            <div class="col-md-2">5</div>
            <div class="col-md-2">6</div>
            <div class="col-md-2">7</div>
            <div class="col-md-2">8</div>
            <div class="col-md-2">9</div>
            <div class="col-md-2">10</div>
            <div class="col-md-2">11</div>
            <div class="col-md-2">12</div>

        </div>
</body>

<!-- 先 js -> bootstrap -->
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</html>
